<template>
  <div id="data-screen-container" class="data-screen-container vab-data-fullscreen">
    <div class="hidden-sm-and-up" style="padding: 20px">
      <vab-alert title="手机端不支持数据大屏演示" type="warning" />
    </div>
    <div class="hidden-xs-only">
      <data-screen-header
        :style="{
          height: headerContentHeight,
          'line-height': headerContentHeight,
          opacity: 0,
        }"
      />
      <div style="padding: 30px 40px 0 40px">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="data-screen-card" :style="{ height: leftCardHeight1 }">
              <div class="card-title">天气情况</div>
              <data-screen-left1 />
            </div>
            <div class="data-screen-card" :style="{ height: leftCardHeight3 }">
              <div class="card-title">会议议程</div>
              <data-screen-left3 :agenda-list="screenData.agendaList" />
            </div>
          </el-col>
          <el-col :span="10">
            <div class="data-screen-card" :style="{ height: bottomCardHeight }">
              <data-screen-bottom :statistics="screenData.statistics.count" :type="screenData.meetingInfo?.activity?.type" />
            </div>
            <div class="data-screen-card" :style="{ height: topCardHeight }">
              <data-screen-left2 :statistics="screenData.statistics.count" :type="screenData.meetingInfo?.activity?.type" />
            </div>
          </el-col>
          <el-col :span="7">
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title">会议详情</div>
              <data-screen-right1 :meeting-info="screenData.meetingInfo" />
            </div>

            <div class="data-screen-card" :style="{ height: rightCardHeight3 }">
              <div class="card-title">信息查询</div>
              <data-screen-right2 :activity-id="getActivityId()" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import Public from '~/src/api/public/index'
import DataScreenBottom from './components/DataScreenBottom.vue'
import DataScreenHeader from './components/DataScreenHeader.vue'
import DataScreenLeft1 from './components/DataScreenLeft1.vue'
import DataScreenLeft2 from './components/DataScreenLeft2.vue'
import DataScreenLeft3 from './components/DataScreenLeft3.vue'
import DataScreenRight1 from './components/DataScreenRight1.vue'
import DataScreenRight2 from './components/DataScreenRight2.vue'

defineOptions({
  name: 'DataScreen',
})

const route = useRoute()
const loading = ref(false)

interface ScreenData {
  meetingInfo: any // 会议详情
  scheduleList: any[] // 会议议程
  signInList: any[] // 签到列表
  statistics: any // 统计数据
  signInData: any[] // 统计数据
  agendaList: any[] // 会议议程列表
}

interface ApiResponse<T> {
  code: number
  message: string
  result: T
}

const screenData = ref<ScreenData>({
  meetingInfo: {},
  scheduleList: [],
  signInList: [],
  statistics: {},
  signInData: [],
  agendaList: [],
})

const headerContentHeight = ref<any>('55px')
const topCardHeight = ref<any>('calc((var(--vh, 1vh) * 100 - 320px)')
const bottomCardHeight = ref<any>('154px')

const leftCardHeight1 = ref<any>('calc((var(--vh, 1vh) * 100 - 165px) / 3)')
const leftCardHeight3 = ref<any>('calc((var(--vh, 1vh) * 100 - 165px) / 1.482)')

const rightCardHeight1 = ref<any>('calc((var(--vh, 1vh) * 100 - 165px) / 3)')
const rightCardHeight3 = ref<any>('calc((var(--vh, 1vh) * 100 - 165px) / 1.482)')

// 获取活动ID
const getActivityId = (): string | undefined => {
  const paramId = route.params.activityId
  const queryId = route.query.activityId

  if (paramId) return String(paramId)
  if (!queryId) return undefined

  const id = Array.isArray(queryId) ? queryId[0] : queryId
  return id ? String(id) : undefined
}

// 获取大屏数据
const fetchScreenData = async () => {
  const activityId = getActivityId()

  if (!activityId) {
    ElMessage.error('未找到活动ID')
    return
  }

  loading.value = true
  try {
    // 获取会议详情
    const detailResponse = (await Public.getDetailApi({
      url: `/api/activity/show/${activityId}`,
    })) as unknown as ApiResponse<any>

    if (detailResponse.code === 0) {
      screenData.value.meetingInfo = detailResponse.result
    }

    // 获取签到统计数据
    const screenResponse = (await Public.getDetailApi({
      url: `/api/screen/${activityId}`,
    })) as unknown as ApiResponse<any>

    if (screenResponse.code === 0 && screenResponse.result) {
      screenData.value.statistics = screenResponse.result
    }

    // 获取会议议程
    const agendaResponse = (await Public.getListApi({
      url: '/api/agendaManagement',
      params: {
        activityId,
        page: 1,
        limit: 10,
      },
    })) as unknown as ApiResponse<{ rows: any[] }>

    if (agendaResponse.code === 0) {
      screenData.value.agendaList = agendaResponse.result.rows
      console.log('会议议程数据:', agendaResponse.result.rows)
    }

    // 获取签到列表
    const signInDataParams = { activityId, page: 1, limit: 1000 }
    const signInDataResponse = (await Public.getListApi({
      url: '/api/player/',
      params: { ...signInDataParams },
    })) as unknown as ApiResponse<any>
    screenData.value.signInData = signInDataResponse.result.rows
  } catch (error) {
    console.error('获取大屏数据失败:', error)
    ElMessage.error('获取大屏数据失败')
  } finally {
    loading.value = false
  }
}

// 定时刷新数据
let refreshTimer: number | null = null
const startAutoRefresh = () => {
  refreshTimer = window.setInterval(() => {
    fetchScreenData()
  }, 2000) // 每分钟刷新一次
}

const stopAutoRefresh = () => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
    refreshTimer = null
  }
}

onMounted(() => {
  document.querySelectorAll('body')[0].className = ''
  fetchScreenData()
  startAutoRefresh()
})

onBeforeUnmount(() => {
  stopAutoRefresh()
})
</script>

<style lang="scss" scoped>
#data-screen-container.data-screen-container.vab-data-fullscreen {
  overflow: auto;
  background-color: #1b1e3c;
  background-image: linear-gradient(to bottom, rgba(27, 30, 60, 0.95), rgba(27, 30, 60, 0.95)),
    url('https://qushen-outsourcing.oss-cn-beijing.aliyuncs.com/hongyou/signInbac.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;

  :deep() {
    .vab-theme-setting {
      border: 1px solid #2a2f5a;

      section {
        > div {
          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4) {
            display: none;
          }
        }
      }
    }
  }

  .data-screen-card {
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 160px;
    padding: var(--el-padding);
    margin-bottom: 20px;
    border: 1px solid rgba(84, 91, 204, 0.4);
    border-radius: 10px;
    background-color: rgba(36, 40, 75, 0.7);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

    .card-title {
      height: 24px;
      padding-left: 10px;
      line-height: 24px;
      text-align: left;
      border-left: 3px solid #545bcc;
      font-size: 1.1em;
      font-weight: 500;
      color: #fff;
      margin-bottom: 15px;
    }

    &::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: 10px;
      background: linear-gradient(45deg, #545bcc, transparent, #545bcc);
      opacity: 0.3;
      z-index: -1;
    }
  }
}
</style>
